import 'dart:convert';

import 'package:flutter/cupertino.dart';
import 'package:flutter_echarts/flutter_echarts.dart';

///
/// @Description TODO
/// @Author liuer
/// @CreateTime 2024年05月09日 14:25
class CommonChartWidget extends StatelessWidget {
  final bool isValueType;///如果是数值类型y轴就是value类型其他为category类型
  final String  title;///如果为数值类型则为必传
  final List<dynamic>? yAxisDataSource;
  final List<dynamic>? xAxisDataSource;
  const CommonChartWidget({
    this.isValueType = false,
    this.title = 'kW',
    required this.yAxisDataSource,
    required this.xAxisDataSource,
    super.key});


  @override
  Widget build(BuildContext context) {
    return   Echarts(
      captureHorizontalGestures: true,
      option: '''
 {
  color: ['#3DD598', '#007DFF'],
 /// 纵轴
  yAxis: [
    {
      type: $isValueType == true?'value':'category',
       max:function (value) {
             return (typeof value.max === 'number' && isNaN(value.max))?1:null;
        },
       min:function (value) {
             return (typeof value.min === 'number' && isNaN(value.min))?0:null;
        },
      show:true,
      // min:10,
      // max:10,
       alignTicks: true,
      name: ${jsonEncode(title)},            
        nameTextStyle: {
        align: "center"
      },
      align: 'left',
      offset: 0,
      /// 坐标轴在 grid 区域中的横向分隔线
      splitLine: {
        show: true,
        lineStyle: {
          type: [10, 5],
          dashOffset: 5,
          color: 'rgba(0,0,0,0.09)',
          width: 1
        }
      },
      axisLabel: {
        color: '#999999',
        fontSize: 11,
      },
    }
  ],
     /// 横轴
  xAxis: {
    type: 'category', 
    data: ${jsonEncode(xAxisDataSource)},                 
    axisLine:{
      show: false,
    }, 
    axisTick: {
      show: false
    }, 
    
    axisLabel: {
      color: '#999999',
      fontSize: 11,
      interval: function (index) { // 自定义间隔函数 
          if (index % 120 === 0) { // 每四小时显示一次  // 返回值是五分钟为一个间隔
              return true;
          } else {
              return false;
          }
      },
    },
  },
  grid: {
    top: 30,
    bottom: 25,
    containLabel: true,
     right: 35,
    left: 20,
  },
 
  legend: {
    show: true,
    icon: 'rect',

    bottom:5,
    itemHeight: 3,
    itemWidth: 12,
     textStyle: {
      borderRadius: [2, 2, 2, 2]
    },
    padding: [
    0,  // 上
    0, // 右
    0,  // 下
    0, // 左
]
  },
  ///提示框
  tooltip: {
    trigger: 'axis',
    backgroundColor: 'rgba(0,0,0,0.85)',
    borderWidth: 0,
    opacity: 0.2,
    confine: true,
    padding: [
      10, // 上
      8, // 右
      10, // 下
      8 // 左
    ],
    textStyle: {
      color: 'white',
       fontSize:11
    },
    axisPointer: {
      /// 坐标轴指示器配置项
      lineStyle: {
        color: 'rgba(0,0,0,0.09)',
        position: function (pt) {
          return [pt[0], 500];
        }
      }
    },
    
  },
    dataZoom: [
    {
      type: 'inside',
      realtime: false,
    },
    // {
    //   start: 0,
    //   end: 0,
    //   height: 10,
    //   bottom:40,
    //    left:20,
    // right:20,
    //   realtime: false,
    // },
  ],
    /// 图表数据
  series: ${jsonEncode(yAxisDataSource)},
}
  ''',
    );
  }
}

